<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>激活邮箱</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" th:href="@{/element-plus/index.css}">
</head>
<body>
<div id="app">
  <el-row justify="center">
    <el-form
      :model="user"
      :rules="formRules"
      ref="emailRegisterForm"
      label-width="80px"
      >

      <el-form-item
              label="密码"
              prop="password"
      >
        <el-input v-model="user.password" placeholder="请输入密码" type="password" show-password clearable ></el-input>
      </el-form-item>
      <el-form-item
              label="确认密码"
              prop="repass"
      >
        <el-input v-model="user.repass" placeholder="请输入确认密码"  type="password" show-password clearable ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="usernameRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</div>
<script th:inline="javascript">
  // 获取上下文路径
  /*<![CDATA[*/
  const ctx = /*[[ @{/} ]]*/ '';
  const email = /*[[ ${email} ]]*/ '';
  /*]]>*/
</script>
<script th:src="@{/js/vue.global.js}"></script>
<script th:src="@{/element-plus/index.js}"></script>
<script th:src="@{/element-plus/icon.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script>

  const app = Vue.createApp({
    data(){
      return{
        user: {
          email
        },
        formRules: {
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {validator: this.passwordRule, trigger: "blur"}
          ],
          repass:[
            {required: true, message: "请输入确认密码", trigger: "blur"},
            {validator: (rule, value, callback) => {
                if (value === this.user.password){
                  callback();
                } else {
                  callback(new Error("两次输入密码不一致"));
                }
              }, trigger: "blur"}
          ],
        }
      }
    },
    methods: {
      passwordRule(prop, value, callback) {
        const reg = /^[a-zA-Z][a-zA-Z0-9]{5,19}$/;
        if (reg.test(value)){
          callback();// 通过
        } else {
          callback(new Error("密码必须以字母开头，长度在6~20之间，只能包含字母、数字"));
        }
      },
      usernameRegister() {
        // 表单校验
        this.$refs['emailRegisterForm'].validate((valid) => {
          if (valid) {
            console.log(this.user);
          }
        });
      }
    }
  });
  app.use(ElementPlus);
  // 注册所有 Element 图标
  for (const iconName in ElementPlusIconsVue) {
    app.component(iconName, ElementPlusIconsVue[iconName]);
  }

  const vm = app.mount('#app');

</script>
</body>
</html>